<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="cn.com.dashihui.web.common.OrderCode" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>后台数据统计</title>
<jsp:include page="../../include/header.jsp"></jsp:include>
<style type="text/css">
table th {
	text-align: center;
}

table td {
	text-align: center;
}

table {
	empty-cells: show;
	border-collapse: collapse;
	margin: 0 auto;
}

.col-lg-9 {
	width: 100%;
}

.pcc {
	width: 110px;
	height: 34px;
}

input {
	text-indent: 10px;
	border-radius: 5px;
}
#money{
     font-size: 20px;
}
#noAuthority{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	width:50%;
	height:300px;
	color:#ccc;
    font-size:30px;
    text-align: center;

}
</style>
</head>
<body>
	<div id="wrapper"  class="row">

				<div class="col-lg-12">
					<h1 class="page-header">后台数据统计</h1>
				</div>
			<!-- 搜索框 -->
		<!-- 	<div class="row">
				<div class="col-lg-offset col-lg-9">
					<label class="search-label">姓名：</label><input type="text"
						id="sName" value="" placeholder="输入姓名"
						class="form-control search-input width200" maxlength="21">
					<label class="search-label">手机号码：</label><input type="text"
						id="sPhone" value="" placeholder="手机号"
						class="form-control search-input width200" maxlength="21">

					<label class="search-label">时间：</label><input type="text" id="sBeginDate" value="" class="form-control search-input width120 datetimepicker"
						data-format="yyyy-mm-dd" > <label
						class="search-label">至</label><input type="text" id="sEndDate"
						value="" class="form-control search-input width120 datetimepicker"
						data-format="yyyy-mm-dd" >					
				</div>
			</div> -->
	
<%-- 			<div class="row">
				<div class=" col-lg-9" style="margin-top:10px">
				      		<label class="search-label">类别：</label>
							 <select id="sType" class="selectpicker pull-left p-l-5" data-width="12%">
							   <option value="">请选择</option>
							   <option value="1">充值</option>
							   <option value="2">消费</option>
							   <option value="3">退款</option>
							   </select>
							<label class="search-label">分公司：</label> 
							<select id="sStore" class="selectpicker pull-left p-l-5" multiple="multiple" data-width="15%">
								<c:forEach items="${storeList }" var="seller">
									<option value="${seller.storeid }">${seller.title }</option>
								</c:forEach>
							</select>
						<button class="btn btn-success search-btn" onclick="query();">确定</button>
						<button class="btn btn-success search-btn" onclick="reset();">重置</button>
						<div class="clearfix"></div>
				</div>
			</div> --%>
				<div class="col-lg-12">
					<div class="col-lg-12">
							<div class="text-muted single-line-text pull-left">
								共 <font color="#428bca" id="dataCount">0</font> 条记录
							</div>
							<!-- <button onclick="doExcel();"
								style="float: right; margin-right: 30px; background-color: #428bca; color: white; border: 2px solid; background-image: linear-gradient(to bottom, #5cb85c 0, #428bca 100%);">导出</button> -->
					</div>
					<div class="table-responsive panel panel-default">
						<table id="dataTable" class="table table-hover table-bordered"
							style="overflow: scroll;">
							<thead>
								<tr>								
									<th width="15%">日期</th>
									<th width="15%">月新会员数</th>

									<th width="15%">月新团购会员</th>
									<!-- <th width="15%">新会员月兑换量</th>
									<th width="15%">老会员月兑换量</th> -->
									<th width="15%">月新会员普通订单数</th>
									<th width="15%">月旧会员普通订单数</th>
									<th width="15%">月普通订单总数</th>
<!-- 									<th width="15%">团购有效订单数</th>
 -->									<!-- <th width="15%">异业有效订单数</th> -->
								</tr>
							</thead>
							<tbody id="dataList"></tbody>							
						</table>
					</div>
						<div class="col-lg-12">
							<ul id="dataPagination" class="pagination-sm pull-right"></ul>
						</div>
					<!-- 金额总和 -->
					<div id="money"></div>
				</div>
	
		<!-- 无权查看显示 -->
		<div id="noAuthority" style="display:none">无权限查看“后台数据统计”</div>
		
	</div>
	<jsp:include page="../../include/javascripts.jsp"></jsp:include>
	<!-- 异步加载下一页数据后，用模板渲染 -->
	<script type="text/html" id="dataTpl">
		{{each list as item}}
				 <tr id="item{{item.id}}" data-id="{{item.id}}">
                    <td>{{item.creatMonth}}</td>
					<td>{{item.usNum}}</td><%--月新会员无问题--%>
					<td>{{item.cNum}}</td><%--月新团购会员无问题--%>
					<td>{{item.newnum}}</td><%--月新会员普通订单无问题--%>
					<td>{{item.oldnum}}</td><%--月旧会员普通订单无问题--%>
					<td>{{item.allnum}}</td><%--月总普通订单无问题--%>
				</tr>
		{{/each}}
</script>
	<script type="text/javascript">
		var dataPaginator;
		$(query);
		function query() {
			var phone = $("#sPhone").val(), name = $("#sName").val(), store = $("#sStore").val(), 
			    beginDate=$("#sBeginDate").val(), endDate=$("#sEndDate").val(),types=$("#sType").val();
			var stores;
			if(store !=null && store !="" && store !=undefined){
				stores=store.join("','");
			}
			
			var params = {
				pageSize : 10,
				phone : phone,
				name : name,
				beginDate:beginDate,
				endDate:endDate,
				types:types,
				stores : stores
			};
			if (dataPaginator) {
				dataPaginator.destroy();
			}
			dataPaginator = Kit.pagination("#dataPagination",
					"${BASE_PATH}/bus/data/page", params, function(result) {						
						if(result.flag==0){
						//设置显示最新的数据数量
						$("#dataCount").html(result.object.totalRow);
						//根据模板渲染数据并填充
						$("#dataList").empty().append(
								template("dataTpl", result.object));
						}else if(result.flag==1){
							var wrapper=document.getElementById("page-wrapper");
							wrapper.innerHTML="";
							wrapper.style.height="0";
							var act=document.getElementById("noAuthority");
							act.style.display="block";
		                   return;					
						}
					});
		}

		//搜索条件重置 
		function reset() {
			$("#sName").val("");
			$("#sPhone").val("");
			$("#sStore").val(" ");
			$("#sStore").trigger("change");
			$("#sStore").selectpicker("refresh");
			$("#sBeginDate").val("");
			$("#sEndDate").val("");
			$("#sType").val("");
			$("#sType").trigger("change");
			$("#sType").selectpicker("refresh");
		}
		//数据导出
		function doExcel() {
			var phone = $("#sPhone").val(), name = $("#sName").val(), store = $("#sStore").val(), 
		    beginDate=$("#sBeginDate").val(), endDate=$("#sEndDate").val(),types=$("#sType").val();
			
			var stores;
			if(store !=null && store !="" && store !=undefined){
				stores=store.join("','");
			}
			window.location.href = "${BASE_PATH}/bus/data/doVipExcel?phone="
					+ phone + "&name=" + name + "&stores=" + stores+"&beginDate=" + beginDate+"&endDate=" + endDate+"&types=" + types;
		}
		var showDialog;
		function showUser(id){
			showDialog = Kit.dialog("会员详情信息","${BASE_PATH}/bus/data/detail/"+id,{size:'size-wide',closable:true}).open();
		}
	</script>
</body>
</html>